<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="报名ID" width="180">
        <template slot-scope="scope">
          {{ scope.row._id }}
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" width="180">
        <template slot-scope="scope">
          {{ scope.row.jobname }}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" width="180">
        <template slot-scope="scope">
          <!-- {{scope.row.status}} -->
          <el-tag type="info" v-if="scope.row.status == 2">待审核</el-tag>
          <el-tag v-if="scope.row.status == 3">约面试</el-tag>
          <el-tag type="success" v-if="scope.row.status == 4">已录取</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 5">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="审核岗位"
      :visible.sync="visible"
      direction="btt"
      size="50%"
    >
      <h1>报名者信息</h1>
      <p>此处需要使用userId，请求获取报名者的信息</p>
      <h1>岗位审核状态</h1>
      <el-radio-group v-model="radio">
        <el-radio :label="2">待审核</el-radio>
        <el-radio :label="3">约面试</el-radio>
        <el-radio :label="4">已录取</el-radio>
        <el-radio :label="5">已拒绝</el-radio>
      </el-radio-group>
      <div>
        <el-button type="primary" @click="handleJoinUpdate">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { joinGet,joinUpdate } from "../../api/job";
export default {
  data() {
    return {
      tableData: [
        {
          _id: "2016-05-02",
          title: "王小虎",
          intro: "简介",
          poster: "img.png",
        },
      ],
      visible:false,
      radio:2,
      joinId:'',  //记录待审核的报名表_id
      idx:-1  //标记待审核的报名数据序号
    };
  },
  created() {
    joinGet().then((res) => {
      console.log(res);
      this.tableData = res.data.data;
    });
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.visible = true
      this.radio = row.status
      this.joinId = row._id
      this.idx = index
    },
    handleJoinUpdate(){
      let {joinId,radio,idx} = this
      joinUpdate(joinId,{status:radio}).then(res=>{
        console.log(res);
        this.visible = false
        this.tableData[idx].status = radio
      })
    }
  },
};
</script>
